<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		#app {
			text-align: center;
		}

		#app div {
			margin: 10px auto;
		}
	</style>
	<body>
		<div id="app">
			<label>宽度：</label><input v-model="w" type="number"> <br>
			<label>高度：</label><input v-model="h" type="number"> <br>
			<label>背景：</label><input v-model="bg" type="color"> <br>
			<label>边框：</label>
			宽度<input v-model="border[0]" type="number">
			类型 <select v-model="border[1]">
				<option value="solid">实线</option>
				<option value="dashed">虚线</option>
				<option value="dotted">点线</option>
				<option value="double">双实线</option>
			</select>
			颜色 <input v-model="border[2]" type="color"><br>
			<label>圆角：</label>
			<input v-model="radius[0]" type="range" min="0" max="50">
			<input v-model="radius[1]" type="range" min="0" max="50"> <br>
			<input v-model="radius[2]" type="range" min="0" max="50">
			<input v-model="radius[3]" type="range" min="0" max="50"> <br>
			<div :style="{
				width: w + 'px',
				height: h + 'px',background: bg,
				border: border[0] + 'px ' + border[1] + ' ' + border[2],
				borderRadius: radius[0] + '% ' + radius[1] + '% ' + radius[2] + '% ' + radius[3] + '%'
			}"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						w: 300,
						h: 300,
						bg: '#ffff00',
						border: [0, '', ''],
						radius: [0, 0, 0, 0],
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
